import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
   Input, Table, Button,Row,Col,Pagination,Card
} from 'antd';
import styles from './style.less';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

const Search = Input.Search;
export default class SpreadList extends PureComponent {
  state = {
    loadMethod:()=>{},
    addSpread:(recode,index)=>{},
  };

  handleTableChange = (page, pageSize) => {
    this.props.onChange(page, pageSize);
  }

  addSpread = (record,index) => {
    this.props.addSpread(record,index);
  }

  handleSearch = (value) => {
    this.props.handleSearch(value);
  }

render() {
    let {spreadListData,total ,pageNo ,pageSize} = this.props;

  const addSpreadColumns = [{
      title: '标题',
      dataIndex: 'activityTitle',
      }, {
      title: '操作',
      render: (text, record,index) => {
        return <span>
          <a href="javascript:void(0)" onClick={() => this.addSpread(record,index)}>添加</a>
        </span>
      },
    }];

    const extraCard = (
      <div>
        <Search
          placeholder="请输入标题"
          onSearch={(value) => this.handleSearch(value)}
          style={{ width: 200 }}
          enterButton
        />
      </div>
    )

    const paginationProps = {
      showSizeChanger: true,
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    return (
      <Card  extra={extraCard}>
        <Row gutter={16}>
        <Col className="gutter-row" span={24}>
          <Table dataSource={spreadListData} columns={addSpreadColumns} style={{ width: '100%' }}
            pagination={paginationProps} rowKey="id" />
        </Col>
        </Row>
    </Card>
    );
  }
}
